<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
* { padding:0; margin:0; }
.loading-screen{display:flex;justify-content:center;align-items:center;background-image:linear-gradient(0deg, #2391D3, #68B3E0);color:#fff;position:absolute;height:100%;width:100%}
.loading-screen .progress-console{white-space:pre;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:11px;margin-bottom:16px}
.loading-screen .progress-bar{width:256px;height:4px;border:none;border-radius:2px;-webkit-appearance:none;background-color:rgba(0,0,0,0.24);background-image:repeating-linear-gradient(-45deg, rgba(0,0,0,0.32), rgba(0,0,0,0.32) 5px, rgba(0,0,0,0.08) 4px, rgba(0,0,0,0.08) 10px);background-size:14px 14px;animation:move .5s linear infinite;overflow:hidden}
.loading-screen .progress-bar>div{width:0;height:100%;background-color:#fff}
@keyframes move{0%{background-position:0 0}100%{background-position:28px 0}}
.text-center{text-align:center}
</style>
</head>
<body>
<div id="loading-screen" class="loading-screen">
  <div class="text-center">
    <div class="progress-console">50%</div>
    <div class="progress-bar"><div style="width:50%"></div></div>
  </div>
</div>
</body>
</html>